<!-- src/components/Header.vue -->
<template>
  <div class="hed">
    <ul>
      <li class="logo">蓝旗</li>
      <li class="lic"><router-link to="/ai">AI答疑</router-link></li>
      <li class="lics">
        <input v-model="searchQuery" class="suosou" placeholder="请输入你要解决的问题" />
        <a href="#" @click.prevent="search">搜索</a>
      </li>
      <li class="toquesion" @click="openModal">提问</li>
      <li class="lic"><router-link to="/chat">私信</router-link></li>
      <li class="lic">
        <router-link to="/profile">
          个人中心
          <img class="head-img" src="https://via.placeholder.com/40" alt="头像" />
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Header', // ✅ 推荐命名
   emits: ['open-question-modal'], // ✅ 明确声明触发的事件
  data() {
    return {
      activeTab: 'follow',
      searchQuery: '',
      newQuestionTitle: '',
      isModalVisible: false,
      newQuestionDesc: '',
      message: ''
    };
  },
  methods: {
    search() {
      // 可以触发全局搜索事件或跳转
      console.log('搜索:', this.searchQuery);
      if (this.searchQuery.trim()) {
        // 例如：跳转到搜索结果页
        this.$router.push({
          path: '/search',
          query: { q: this.searchQuery }
        });
      }
    },
    openModal() {
      this.isModalVisible = true;
     console.log('isModalVisible:', this.isModalVisible);
      // 这里你可以触发一个自定义事件，或使用状态管理打开模态框
      this.$emit('open-question-modal'); // ✅ 触发事件，父组件可监听
    }
  }
};
</script>

<style scoped>
/* 你的样式保持不变，已优化 */
.hed {
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  position: fixed;
  border: 1px solid darkgrey;
  background-color: white;
  box-shadow: darkgrey 0px 0px 5px 0px;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.hed ul {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0 20px;
  list-style-type: none;
  width: fit-content;
}

.hed li {
  margin-right: 30px;
}

.logo {
  font-size: 45px;
  color: #1579DC;
  margin-right: 50px;
}

.lic a {
  font-size: 20px;
  color: #707070;
  text-decoration: none;
}

.lics {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lics input.suosou {
  width: 320px;
  height: 35px;
  padding-left: 20px;
  border-radius: 35px;
  border: 1px solid #ccc;
  outline: none;
}

.lics a {
  color: #1579DC;
  text-decoration: none;
  white-space: nowrap;
  font-size: 16px;
}

.toquesion {
  background-color: #1579DC;
  color: white;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 35px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.head-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 8px;
  object-fit: cover;
}
</style>